<template>
    <div class="commentModelBox">
        <div v-for="i in props.list" :key="i.id">
            
            <div class="commentModelBoxitemBox">
                <div>{{i.username}}{{i.parentUserName?" 回复 "+i.parentUserName:""}}:{{ i.context }} <span class="smallText">点击回复</span></div>
            </div>
            <commentModel v-if="i.child" :list="i.child"></commentModel>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { commentList2 } from "./api"

// import commentModel from "./commentModel.vue"
const props = defineProps<{ list: Array<commentList2> }>()
</script>
<style lang="less" scoped>
.commentModelBox{
    // padding: 10px;
    .commentModelBoxitemBox{
        font-size: 12px;
        div{
            word-break: break-all;
            white-space:normal;
        }
        // word-wrap: break-all;
        // overflow-wrap: break-word;
        // white-space:normal;
        padding: 0px 0px 5px 0px;
        .smallText{
            display: inline-block;
            background-color: rgba(241, 218, 222,0.5);
            border-radius: 2px;

        }
    }
}
</style>
